<template>
  <a-modal
    title="供应商协同链接"
    :width="800"
    :visible="visible"
    @cancel="handleCancel"
    cancelText="关闭"
    :footer="null"
  >
    <!-- 上方白色信息区 -->
    <div class="info-section">
      <h3 class="supplier-name">供应商：{{ formInfo.companyName }}</h3>
      <p class="instruction">
        请将下方链接提供给供应商，由供应商填写企业资质信息：
      </p>

      <div class="link-group">
        <div class="link-item">
          <span class="label">协同链接：</span>

          <a-input
            readOnly
            :value="formInfo.collaborativeKey"
            style="width: calc(80% - 64px)"
          />
        </div>

        <div class="code-item">
          <span class="label">校 验 码：</span>
          <a-input readOnly :value="formInfo.checkCode" style="width: 120px" />
        </div>

        <div class="expiry">
          <span class="label">有 效 期：</span>
          <a-input
            readOnly
            :value="formInfo.collaborationValidityTime"
            style="width: calc(80% - 64px)"
          />
        </div>
      </div>
    </div>

    <!-- 下方灰色操作区 -->
    <div style="text-align: right; margin-top: 15px; margin-right: 25px">
      <a-button type="primary" @click="copyAllInfo">复制</a-button>
    </div>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  name: 'devSupplierView',
  data() {
    return {
      visible: false,
      formInfo: {
        collaborationLink: '',
      },
      coordinationLink: '',
      verificationCode: '',
      collaborationValidityTime: '', //链接将于 2025-05-27 23:59:59 失效，请尽快完成填写
      url: {
        saveInfo: '/system/devSupplier/save',
        getInfo: '/system/devSupplier/info',
        cooperateWith: 'system/devSupplier/cooperateWith',
      },
    }
  },
  methods: {
    show(record) {
      if (record.id) {
        this.getCooperateWith(record.id, '0', record.companyName)
        this.visible = true
      }
    },
    getCooperateWith(id, isRefresh, companyName) {
      getAction(this.url.cooperateWith, {
        id: id,
        isRefresh: isRefresh,
      }).then((res) => {
        var result = res.result.data
        this.formInfo = JSON.parse(result)
        this.formInfo.companyName = companyName
        this.formInfo.id = id
        this.formInfo.collaborationValidityTime = `链接将于${this.formInfo.collaborationValidityTime}失效，请尽快完成填写`
        this.formInfo.collaborationLink =
          'http://localhost:8000/system/supplier?key=' +
          this.formInfo.collaborativeKey
      })
    },
    copyText(text) {
      const input = document.createElement('input')
      input.value = text
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('复制成功')
    },
    copyAllInfo() {
      const content = `协同链接：${this.formInfo.collaborationLink} \t\n校验码：${this.formInfo.checkCode}\t\n有效期：${this.formInfo.collaborationValidityTime}`
      this.copyText(content)
    },

    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    },
  },
}
</script>
<style scoped>
@import url('../../../css/supplier/supplierView.css');

/* 输入框高度统一 */
.ant-input {
  border: none; /* 隐藏边框 */
  background-color: transparent; /* 背景透明 */
  /* 或者设置一个特定的颜色 */
  color: #676767;
  font-size: 15px;
  height: 17px;
}
</style>
